<template>
  <div class="container">
    TITLE: <input type="text" v-model="title">
    <MarkdownEditor ref="editorBox" class="editor" :height="'800px'" :value="text" />
    <UiButton @click="save">保存</UiButton>
    <br />
    <h1>LIST :</h1>
    <ul>
      <li v-for="(md, idx) in list">
        <a :href="`markdown/${md?.id}`">{{idx + 1}} - {{md?.title}}</a>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import MarkdownEditor from "../../components/markdown/MarkdownEditor.vue";
import UiButton from "../../components/ui/UiButton.vue";
import axios from "axios";

const editorBox = ref()
const title = ref('')
const text = ref('# Hello World')
const list = ref(null)

const save = async () => {
  const data = new FormData();
  data.append('title', title.value)
  data.append('text', editorBox.value.getMarkdown())
  console.log(await axios.post('/api/t/subj', data));
  await getAll()
}

const getAll = async () => {
  list.value = (await axios.get('/api/t/subj')).data
}

onMounted(async () => {
  await getAll()
})
</script>

<style scoped>

</style>